<template>
 
    <div :style="styleColor" style="padding:0 5px">
        <div class="head">
            <div class="left">
                <img class="headerIMG" src="@/assets/images/bigViewIMG2/bluejiantou.png" alt="">
                <span>体检档案</span>
            </div>
            <!-- <div class="right" @click="jump">
                <span>详情</span>
                <img class="imgJT" src="@/assets/images/bigViewIMG2/jiantou.png" alt="">
            </div> -->
        </div>
        <!-- <div style="color:#fff;font-size:30px;line-height: 300px;">待开发。。。</div> -->
        <!-- <div class="title">
            <div class="header">整体风险评估</div>
            <div class="main">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</div>
        </div> -->
        <div id="recordMap" ref="recordMap" style="width: 100%; height:350px"></div>
    </div>
  
</template>

<script>
import echarts from 'echarts'
import { encrypt, decrypt } from '@/utils/AES.js'
import {reqFindEnterpriseRisk} from '@/api/home/index.js'
export default {
    data(){
        return {
            options:{},
            recordMapData:{

            }
        }
    },
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    computed: {
        transStyle() {
            // console.log('??????????????????', this.objToOne(this.options))
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    created(){
        this.getList()
    },
    mounted() {
        this.options = this.value
        this.$nextTick(() => {
            this.initChart();
        });
        
    },
    watch:{
           recordMapData:{
            deep:true,
            handler(val){
                this.setOptions(val);
            }
        },
         $route: {
            handler(val) {
                if (val.query.reportCode == "SecondView") {
                this.getList()
                } else {
                return
                }


            },
            deep: true
        }
    },
    methods:{
        async getList(){
             let query = JSON.parse(decrypt(this.$route.query.key))
            // console.log(query);
            const res=await reqFindEnterpriseRisk({ tradeCo: query.tradeCo,tradeName:'' })
             if(res.code==200){
                this.recordMapData=res.data
                
            }
            this.chart.hideLoading();
        },
        jump(){
            let query = JSON.parse(decrypt(this.$route.query.key))
            this.$router.push({
                path: '/visual/thirdView/recordView',
                query: { 
                    key: encrypt(JSON.stringify({
                        company:query.company,
                         text: '体检档案',
                         tradeCo:query.tradeCo
                    }))
                 }
            })
        },
        initChart() {
            this.chart = echarts.init(document.getElementById('recordMap'), null, { renderer: 'svg' });
              this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions();
        },
        setOptions(data){
            const consistencyRate=data.consistencyRate||0
            const doubleRiskRate=data.doubleRiskRate||0
            const goodsPriceRate=data.goodsPriceRate||0
            const industryRate=data.industryRate||0
            const portPriceRate=data.portPriceRate||0
            const priceFloatRate=data.priceFloatRate||0
            const tradeExceptionRate=data.tradeExceptionRate||0
            const tradeWayPriceRate=data.tradeWayPriceRate||0
            let arr=[]
            arr.push(+consistencyRate)
            arr.push(+doubleRiskRate)
            arr.push(+goodsPriceRate)
            arr.push(+industryRate)
            arr.push(+portPriceRate)
            arr.push(+priceFloatRate)
            arr.push(+tradeExceptionRate)
            arr.push(+tradeWayPriceRate)
            this.chart.setOption({
                color: ['#236eee'],
                grid: {
                    left: '7%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                title: {
                    text: '企业风险分类预警情况',
                    textStyle:{
                        color:'#fff',
                        fontSize:16,
                        
                    },
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter:(params)=>{
                        // console.log(params);
                        if(params[0].axisValue=='归类一致性分析') {
                            return `
                            <span
                            style="display:inline-block;
                            margin-right:5px;
                            border-radius:10px;
                            width:10px;
                            height:10px;
                            background-color:${params[0].color}"

                            ></span>
                            归类一致性分析: 
                            <div>${data.consistency}</div>
                            `
                        }else if(params[0].axisValue=='双特风险异常'){
                         
                             return `
                            <span
                            style="display:inline-block;
                            margin-right:5px;
                            border-radius:10px;
                            width:10px;
                            height:10px;
                            background-color:${params[0].color}"

                            ></span>
                            双特风险异常: 
                            <div>${data.doubleRisk}</div>
                            `
                        }else if(params[0].axisValue=='商品单价行业分析'){
                          
                             return `
                            <span
                            style="display:inline-block;
                            margin-right:5px;
                            border-radius:10px;
                            width:10px;
                            height:10px;
                            background-color:${params[0].color}"

                            ></span>
                            商品单价行业分析: 
                            <div>${data.goodsPrice}</div>
                            `
                        }else if(params[0].axisValue=='归类行业性分析'){
                          
                            return `
                            <span
                            style="display:inline-block;
                            margin-right:5px;
                            border-radius:10px;
                            width:10px;
                            height:10px;
                            background-color:${params[0].color}"

                            ></span>
                            归类行业性分析: 
                            <div>${data.industry}</div>
                            `
                        }else if(params[0].axisValue=='贸易口岸单价分析'){
                           
                             return `
                            <span
                            style="display:inline-block;
                            margin-right:5px;
                            border-radius:10px;
                            width:10px;
                            height:10px;
                            background-color:${params[0].color}"

                            ></span>
                            贸易口岸单价分析: 
                            <div>${data.portPrice}</div>
                            `
                        }else if(params[0].axisValue=='商品单价浮动分析'){
                           
                               return `
                            <span
                            style="display:inline-block;
                            margin-right:5px;
                            border-radius:10px;
                            width:10px;
                            height:10px;
                            background-color:${params[0].color}"

                            ></span>
                            商品单价浮动分析: 
                            <div>${data.priceFloat}</div>
                            `
                        }else if(params[0].axisValue=='贸易启运国异常'){
                           
                                return `
                            <span
                            style="display:inline-block;
                            margin-right:5px;
                            border-radius:10px;
                            width:10px;
                            height:10px;
                            background-color:${params[0].color}"

                            ></span>
                            贸易启运国异常: 
                            <div>${data.tradeException}</div>
                            `
                        }else {
       
                                  return `
                            <span
                            style="display:inline-block;
                            margin-right:5px;
                            border-radius:10px;
                            width:10px;
                            height:10px;
                            background-color:${params[0].color}"

                            ></span>
                            贸易方式单价分析: 
                            <div>${data.tradeWayPrice}</div>
                            `
                        }
                      
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['归类一致性分析','双特风险异常','商品单价行业分析','归类行业性分析','贸易口岸单价分析','商品单价浮动分析','贸易启运国异常','贸易方式单价分析'],

                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.2)'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                         rotate: 30,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['#262732'],
                            width: 1,
                            type: 'solid',
                        },
                    }

                },
                yAxis:[
                     {
                      min:0,   //最小百分比
                        max:100, //最大百分比
                    type: 'value',
                    name: '单位（%）',
                  
                     nameLocation:'end',
                      nameTextStyle: {
                                color: "#fff",
                                // fontWeight:'lighter'
                            },
                    // axisTick: {
                    //     show: false,
                    // },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ["rgba(209,209,209,.25)"],
                        },
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.2)'
                        }
                    },
                      axisLabel: {
                                show: true,
                                interval: 0, // 使x轴文字显示全
                                color: '#fff',
                                formatter: '{value}%'  //y轴数值，带百分号
                        },
                },
                ],
                series: [{
                    data: arr,
                    type: 'line',
                    areaStyle: {}
                }]
            })
        }
    }
}
</script>

<style scoped lang="scss">
.head {
    // padding: 0 5px;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .left {
        display: flex;
        align-items: center;

        .headerIMG {
            width: 40px;
            height: 40px;
        }

        span {
            color: #fff;
            margin-left: 10px;
            font-size: 15px;
        }
    }

    .right {
        cursor: pointer;
        display: flex;
        margin-right: 10px;
        align-items: center;

        span {
            color: #fff;
            font-size: 15px;
        }

        .imgJT {
            margin-left: 10px;
            width: 12px;
            height: 12px;
        }
    }
}
.title {
    width: 100%;
    height: 80px;
    padding: 0 15px;
    .header {
        font-size: 16px;
        text-align: center;
        color: #00ffff;
    }
    .main {
        font-size: 14px;
        color: #fff;
        word-wrap: break-word;
        word-break: break-all;
    }
    
}
</style>